import { ChangeDetectionStrategy, Component, Input, NgZone, ChangeDetectorRef, ElementRef } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd';

/**
 * 维修原因比例组件
 */
@Component({
  selector: 'repair-reason-rate',
  templateUrl: './repair-reason-rate.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.card]': 'true',
  },
})
export class RepairReasonRateComponent {
  @Input()
  set codeName(val) {
    this._codeName = val;
  }
  _codeName = null;

  @Input()
  set raw(val) {
    if (val && val.list) {
      this._data = val.list;
      this.attachData();
    }
  }

  @Input()
  title = null;
  _data = [];
  time = null;
  noData = true;
  chart = null;
  max = 0;
  min = 0;

  constructor(
    public http: _HttpClient,
    public msg: NzMessageService,
    private ngZone: NgZone,
    private cdr: ChangeDetectorRef,
  ) {}

  render(er: ElementRef) {
    this.ngZone.runOutsideAngular(() => setTimeout(() => this.init(er.nativeElement), 50));
  }

  private attachData() {
    this.max = 0;
    this.min = 0;
    this.noData = false;
    const { _data } = this;

    _data.forEach(r => {
      if (this.max < r.total) {
        this.max = r.total;
      }
      if (this.min > r.total) {
        this.min = r.total;
      }
    });

    this.time = new Date();
    this.cdr.detectChanges();
  }

  private init(container: HTMLElement) {
    const { _data, max, min } = this;
    const chart = (this.chart = new G2.Chart({
      container,
      forceFit: true,
      height: 500,
      padding: [20, 50, 50, 120],
    }));
    chart.source(_data, {
      total: {
        max,
        min,
        nice: false,
        alias: '维修（次）',
      },
    });
    chart.axis('ID', {
      label: {
        formatter: val => {
          return _data.filter(d => d.ID === val)[0].REASON;
        },
        textStyle: {
          fill: '#8d8d8d',
          fontSize: 12,
        },
      },
      tickLine: {
        alignWithLabel: false,
        length: 0,
      },
      line: {
        lineWidth: 0,
      },
    });
    chart.axis('total', {
      label: null,
      title: {
        offset: 30,
        textStyle: {
          fontSize: 12,
          fontWeight: 300,
        },
      },
      grid: {
        lineStyle: {
          lineWidth: 0,
        },
      },
    });
    chart.legend({
      position: 'right-top', // 设置图例的显示位置
      itemGap: 20, // 图例项之间的间距
      offsetX: -30,
    });
    chart.coord().transpose();
    chart.tooltip(true, {
      showTitle: false,
    });
    chart
      .interval()
      .position('ID*total')
      .color('PROBLEM_TYPE', PROBLEM_TYPE => {
        // ['#face1d', '#37c461', '#']
        if ('人为问题' === PROBLEM_TYPE) {
          return '#2194ff';
        } else if ('其他问题' === PROBLEM_TYPE) {
          return '#face1d';
        } else if ('质量问题' === PROBLEM_TYPE) {
          return '#f50';
        }
      })
      .size(10)
      .opacity(1)
      .label('total', {
        textStyle: {
          fill: '#8d8d8d',
        },
        offset: 10,
        formatter: function formatter(text) {
          return text;
        },
      });

    chart.render();
  }
}
